<template>
  <view class="my-container">
    <!-- 顶部用户信息栏 -->
    <view class="user-header">
      <!-- 头像+登录入口 -->
      <view class="avatar-login-wrap">
        <image 
          class="avatar-img" 
          :src="userInfo.avatar || defaultAvatar" 
          mode="aspectFill"
          @click="handleAvatarClick"
        ></image>
        <view class="user-info">
          <text class="welcome-text">HI~欢迎回来</text>
          <button 
            class="login-btn" 
            @click="goToLoginPage"
            v-if="!isLogin"
          >
            登录
          </button>
          <text class="username" v-else>{{ userInfo.nickname || "我的昵称" }}</text>
        </view>
      </view>
      <!-- 关注/话题 -->
      <view class="user-stat">
        <text class="stat-item">关注{{ userInfo.followCount || 3 }}</text>
        <text class="stat-divider">|</text>
        <text class="stat-item">话题{{ userInfo.topicCount || 0 }}</text>
      </view>
    </view>

    <!-- 功能入口（收藏/历史/设置） -->
    <view class="func-nav">
      <view class="func-item" v-for="(item, idx) in funcList" :key="idx">
        <image class="func-icon" :src="item.icon" mode="widthFix"></image>
        <text class="func-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 广告横幅 -->
    <view class="ad-banner">
      <image 
        class="ad-img" 
        src="/static/ad-banner.png" 
        mode="widthFix"
      ></image>
    </view>

    <!-- 发布模块 -->
    <view class="publish-module">
      <view class="publish-icon-wrap">
        <image class="publish-icon" src="/static/publish-icon1.png" mode="widthFix"></image>
        <image class="publish-icon" src="/static/publish-icon2.png" mode="widthFix"></image>
        <image class="publish-icon" src="/static/publish-icon3.png" mode="widthFix"></image>
      </view>
      <text class="publish-desc">已有385,893人</text>
      <text class="publish-desc">在这里发布身边的新鲜事</text>
      <button class="publish-btn" @click="goToPublishPage">我也要发布</button>
      <text class="go-browse" @click="goToBrowsePage">先去逛逛 ></text>
    </view>

    <!-- 底部导航栏 -->
    <uni-tabbar :current="3" @change="switchTab">
      <uni-tabbar-item icon="home" text="新闻"></uni-tabbar-item>
      <uni-tabbar-item icon="video" text="视频"></uni-tabbar-item>
      <uni-tabbar-item icon="chat" text="话题"></uni-tabbar-item>
      <uni-tabbar-item icon="person" text="未登录"></uni-tabbar-item>
    </uni-tabbar>
  </view>
</template>

<script>
export default {
  name: "MyPage",
  data() {
    return {
      // 默认头像
      defaultAvatar: "/static/avatar-default.png",
      // 登录状态
      isLogin: false,
      // 用户信息（登录后可更新）
      userInfo: {
        avatar: "", // 头像地址
        nickname: "", // 昵称
        followCount: 3, // 关注数
        topicCount: 0 // 话题数
      },
      // 功能入口列表
      funcList: [
        { name: "收藏", icon: "/static/icon-collect.png" },
        { name: "历史", icon: "/static/icon-history.png" },
        { name: "设置", icon: "/static/icon-setting.png" }
      ]
    };
  },
  onShow() {
    // 页面显示时，从缓存读取登录状态和用户信息（模拟登录后回显）
    const loginInfo = uni.getStorageSync("loginInfo");
    if (loginInfo) {
      this.isLogin = true;
      this.userInfo = { ...this.userInfo, ...loginInfo };
    }
  },
  methods: {
    // 跳转到登录页面
    goToLoginPage() {
      uni.navigateTo({
        url: "/pages/login/loginPage"
      });
    },
    // 点击头像（登录后可更换头像）
    handleAvatarClick() {
      if (!this.isLogin) {
        // 未登录时点击头像，跳转到登录页
        this.goToLoginPage();
        return;
      }
      // 已登录时，选择图片更换头像
      uni.chooseImage({
        count: 1, // 仅选1张
        sizeType: ["original", "compressed"], // 原图/压缩图
        sourceType: ["album", "camera"], // 相册/相机
        success: (res) => {
          // 模拟上传头像（实际项目需调用后端接口）
          const tempFilePath = res.tempFilePaths[0];
          // 更新本地头像
          this.userInfo.avatar = tempFilePath;
          // 同步到缓存
          uni.setStorageSync("loginInfo", {
            ...this.userInfo,
            avatar: tempFilePath
          });
          uni.showToast({
            title: "头像更换成功",
            icon: "success"
          });
        }
      });
    },
    // 跳转到发布页面
    goToPublishPage() {
      if (!this.isLogin) {
        uni.showToast({
          title: "请先登录",
          icon: "none"
        });
        this.goToLoginPage();
        return;
      }
      uni.navigateTo({
        url: "/pages/publish/publishPage"
      });
    },
// 跳转到逛逛页面
     goToBrowsePage() {
       uni.switchTab({
         url: "/pages/news/newsPage"
       });
     },
     // 底部导航切换
     switchTab(e) {
       const tabIndex = e.current;
       const tabUrls = [
         "/pages/news/newsPage",
         "/pages/video/videoPage",
         "/pages/topic/topicPage",
         "/pages/my/myPage"
       ];
       uni.switchTab({
         url: tabUrls[tabIndex]
       });
     }
   }
 };
 </script>
 <style scoped>
 /* 页面容器 */
 .my-container {
   width: 100%;
   min-height: 100vh;
   background-color: #f5f5f5;
 }
 /* 顶部用户信息栏 */
 .user-header {
   background: linear-gradient(to right, #d4a76a, #f5d790);
   padding: 20px 16px 16px;
   color: #fff;
 }
 .avatar-login-wrap {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
 .avatar-img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 2px solid #fff;
 }
 .welcome-text {
   font-size: 16px;
   display: block;
   margin-bottom: 8px;
 }
 .login-btn {
   background-color: #ff4d4f;
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 4px 12px;
   font-size: 14px;
   line-height: 1.4;
 }
 .username {
   font-size: 14px;
   color: #fff;
 }
 .user-stat {
   display: flex;
   align-items: center;
   font-size: 14px;
   gap: 8px;
 }
 .stat-divider {
   color: #eee;
 }
 /* 功能入口 */
 .func-nav {
   display: flex;
   justify-content: space-around;
   background-color: #fff;
   padding: 16px 0;
   margin: 10px 0;
 }
 .func-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
 }
 .func-icon {
   width: 24px;
   height: 24px;
 }
 .func-text {
   font-size: 12px;
   color: #666;
 }
 /* 广告横幅 */
 .ad-banner {
   padding: 0 16px;
   margin-bottom: 10px;
 }
 .ad-img {
   width: 100%;
   border-radius: 4px;
 }
 /* 发布模块 */
 .publish-module {
   background-color: #fff;
   padding: 30px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   margin-bottom: 60px; /* 给底部导航留空间 */
 }
 .publish-icon-wrap {
   display: flex;
   gap: 16px;
   margin-bottom: 12px;
 }
 .publish-icon {
   width: 32px;
   height: 32px;
 }
 .publish-desc {
   font-size: 14px;
   color: #999;
   text-align: center;
 }
 .publish-btn {
   border: 1px solid #ff4d4f;
   color: #ff4d4f;
   background-color: #fff;
   border-radius: 20px;
   padding: 6px 24px;
   margin: 8px 0;
   font-size: 14px;
 }
 .go-browse {
   font-size: 14px;
   color: #ff4d4f;
 }
 /* 底部导航样式覆盖（如需自定义） */
 ::v-deep .uni-tabbar {
   background-color: #fff;
 }
 ::v-deep .uni-tabbar-item--active .uni-tabbar-item__text {
   color: #ff4d4f;
 }
 </style>